<template>
  <div class="container">
<nbanner :config="config"></nbanner>
    <main-content :catname="title" :config="config" :param="param">
      <div slot="menu_list">
        <dl>
         <dt :style="{background: config.color}" class="menu_dt"><span>{{title}}</span></dt>
          <dd v-for="(item,index) in new_menu_list" :class="active==index?'menu_dd hover':'menu_dd'"
              @click="ToNewPath(item,index)">{{item.title}}
          </dd>
        </dl>
      </div>
      <div class="inner_content" slot="inner_content">
        <div class="page_con">

              <!-- 功能数据 -->
          <div v-if="content_type=='url'" class="right">
                <customContent :lists="lists" :type="category"></customContent>
          </div>
              <!-- 文章数据 -->
          <div v-else>
              <div v-if="lists.length>1">
              <!-- 文章列表数据 -->
                  <div v-for="(item,index) in lists" :key="index" @click="toPath(item.id)" class="dynamic_list">
                    <p class="title_list" style="color: black;font-size: 30px">{{item.title}}</p>
                    <div class="title_desc">{{item.desc}}</div>
                    <p class="title_time" style="font-size: 28px;color: #a3afb7;text-align: right">{{item.create_time }}</p>
                  </div>
                  <el-pagination
                    :style="{'--activeColor':this.$util.storage.get('color')}"
                    background
                    layout="prev, pager, next"
                    :page-size="6"
                    :page-count="8"
                    :total="total">
                  </el-pagination>
              </div>
              <!-- 文章内容数据 -->
              <div v-if="lists.length==1">
                  <div class="page_title">{{lists[0].title}}</div>
                  <div class="page_con" v-html="lists[0].content"></div>
              </div>

              <!-- 无数据数据 -->
              <div v-else>
              </div>
          </div>



        </div>
      </div>


  </main-content>

  <MainMenu :config="config" :menu="menu" ></MainMenu>
    <footer-bar></footer-bar>
</div>

</template>

<script>
  import MainMenu from '@/components/mainmenu/MainMenu';
  import mainContent from '@/components/content/mainContent';
  import footerBar from '@/components/content/footerBar';
  import nbanner from '@/components/bannder/nbanner';
  import menu from '@/components/content/menu';
  import customContent from '@/components/content/customContent';

  export default {
    name: "ContentDetail",
    components: {
      nbanner,
      MainMenu,
      footerBar,
      customContent,
      mainContent
    },
    created(options) {
      const _this = this
      _this.config=_this.$util.storage.get("config");
      _this.menu=_this.$util.storage.get("menu");
      _this.slides=_this.$util.storage.get("slides");
      _this.param=_this.$route.query
      _this.$http.get("/api/PcData/getMenuData",{id:_this.param.id,vollege_id:_this.$util.vollege_id},r=>{
        _this.new_menu_list=r.data.menu
        _this.title=r.data.info.title
      })
    },

    data(){
      return {
        title:'测洒',
        active:0,
        total:0,
        category:"",
        content_type:'article',
        config:[],
        lists:[],
        menu:[],
        param:[],
        slides:[],
        new_menu_list:[],
      }
    },
    methods: {
      ToNewPath(data,index){
        const _this = this
        _this.active=index
        _this.content_type=_this.gettable(data.content_type)
        _this.param.now_id=data.id
        _this.$http.get("/api/PcData/getData?"+data.param,{vollege_id:_this.$util.vollege_id},r=>{
            // console.log(r)
            _this.category=r.data.type;
            _this.lists=r.data.list;
            // console.log(_this.lists)
            
        })
      },
      toPath(id){
        this.$router.push({path:"/container/detail",query:{id:this.param.id,detail_id:id,now_id:this.param.now_id}});
     },
     gettable(content_type){

     }
    }
  }
</script>

<style>
.page_title{
      text-align: center;
    padding: 50px 0 0 0px;
    font-size: 32px;
}
 .inner_content {
    padding: 30px 0 0 30px;
/*    padding-top: 60px;
    padding-left: 50px;*/
  }

  .page_con {
    padding: 0px;
    height: 620px;
    width: 1300px;
  }
  .page_con >>> img{
    max-width: 100%;
  }





  .right {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
  }


  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 130px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .title_list{

  }
  .title_desc{
    width: 82%;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .title_time{

  }


  .el-pagination{
    height: 100px;
    padding-top: 53px;
    text-align: center;
  }
  .right >>> .el-pager{
    height: 100px;
  }
  .right >>> .el-pager li{
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin-right: 20px;
  }
  .right >>> .el-pager li:first-child{
    height: 50px;
    width: 50px;
    line-height: 50px;
    /*margin-left: 20px;*/
  }
  .right >>> .btn-prev{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .btn-next{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
    /*background: #29be74;*/
    background: var(--activeColor) !important;
  }


</style>
